<template>
	<custom-bar custonName="添加设备" headColorChild="#fff" :isShowBack="false">
		<view class="returnBtn" @click="goBack">
			<up-icon name="arrow-left" color="#000" size="20"></up-icon>
		</view>
	</custom-bar>
	<view class="connect-page">
		<view class="connect-top">
			<up-form :model="form" ref="formRef" :rules="rules">
				<view class="connect-status">
					<view class=""> 设备ID </view>
					<up-form-item prop="deviceIdValue" placeholder="请输入设备ID">
						<up-input v-model="form.deviceIdValue" />
					</up-form-item>
				</view>

				<view class="connect-status">
					<view class=""> 设备名称 </view>
					<up-form-item prop="deviceNameValue" placeholder="请输入设备名称,如'客厅'">
						<up-input v-model="form.deviceNameValue" />
					</up-form-item>
				</view>

				<view class="connect-status" v-if="!qrAdd">
					<view class=""> 设备密码 </view>
					<up-form-item prop="devicePasswordValue" placeholder="请输入设备名称,如'客厅'">
						<up-input v-model="form.devicePasswordValue" :password="showPassword" />
					</up-form-item>
					<view class="connect-status-pass-eye" @click.stop.prevent="togglePasswordType">
						<up-icon name="eye-fill" v-if="!showPassword" size="22"></up-icon>
						<up-icon name="eye-off" v-if="showPassword" size="22"></up-icon>
					</view>
				</view>
			</up-form>
		</view>
		<view class="connect-bottom">
			<up-button class="connect-bottom-btn" text="完成" @click="submit" :loading="submitLoading"
				size="large"></up-button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		useUserStore
	} from "@/store/user";

	// 获取store实例
	const userStore = useUserStore();
	const form = ref({
		deviceIdValue: "",
		deviceNameValue: "",
		devicePasswordValue: "",
	});
	const formRef = ref(null);
	const qrAdd = ref(false);
	const showPassword = ref(true);
	const submitLoading = ref(false);
	const rules = {
		deviceIdValue: [{
				required: true,
				message: "请输入设备ID",
				trigger: ["blur"],
			},
			{
				validator: (rule, value, callback) => {
					if (value && value.length !== 12) {
						callback(new Error("设备ID必须是12位"));
					} else {
						callback();
					}
				},
				trigger: ["blur"],
			},
		],
		deviceNameValue: [{
			required: true,
			message: "请输入设备名称",
			trigger: ["blur"],
		}, ],
		devicePasswordValue: [{
			required: true,
			message: "请输入设备密码",
			trigger: ["blur"],
		}, ],
	};
	// 添加监听器
	onLoad((options) => {
		let code = decodeURIComponent(options.uid);
		if (code && code !== "undefined" && code !== "null" && !options.isQr) {
			form.value.deviceIdValue = code;
		}
		// 确保最终值不是 undefined
		if (form.value.deviceIdValue === undefined) {
			form.value.deviceIdValue = "";
		}
		if (options.isQr) {
			qrAdd.value = options.isQr;
			if (code) {
				form.value.devicePasswordValue = code.substring(0, 4);
				form.value.deviceIdValue = code.substring(4);
			}
		}
	});
	onUnload(() => {});

	const submit = () => {
		formRef.value
			.validate()
			.then((res) => {
				submitLoading.value = true;
				createDevice();
			})
			.catch((err) => {
				submitLoading.value = false;
			});
	};
	const createDevice = () => {
		let data = {
			equipNo: form.value.deviceIdValue,
			devName: form.value.deviceNameValue,
			psd: form.value.devicePasswordValue,
		};
		let url = "";
		let identity = uni.getStorageSync("identity");
		if (identity) {
			url = "/wechat/addDevForItem";
			data.itemId = userStore.getItemId();
		} else {
			url = "/wechat/addBindDev";
		}
		uni.$u.http
			.post(url, data)
			.then((res) => {
				if (res.success) {
					uni.showToast({
						title: "添加成功",
						icon: "success",
					});

					setTimeout(() => {
						submitLoading.value = false;
						uni.switchTab({
							url: "/pages/index/index",
							success: (res) => {
								console.log("页面跳转成功");
							},
							fail: (err) => {
								console.error("页面跳转失败:", err);
								// 跳转失败时的备选方案
								uni.navigateTo({
									url: "/pages/index/index",
								});
							},
						});
					}, 1500);
				} else {
					submitLoading.value = false;
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			})
			.catch((e) => {
				submitLoading.value = false;
				console.log(e, "请求失败");
				uni.showToast({
					title: e,
					icon: "none",
				});
			});
	};

	const goBack = () => {
		// if (qrAdd.value) {
		// 	uni.switchTab({
		// 		url: "/pages/index/index",
		// 	});
		// } else {
		uni.navigateBack();
		// }
	};
	const togglePasswordType = () => {
		console.log("click");
		showPassword.value = !showPassword.value;
	};
</script>

<style lang="scss" scoped>
	.returnBtn {
		width: 30px;
		position: absolute;
		left: 20rpx;
		bottom: 10rpx;
	}

	.connect-top {
		height: 65vh;
		padding: 0 40rpx;
		padding-top: 100rpx;

		.connect-status {
			background: #d7d7d7;
			border-radius: 20px;
			padding: 30rpx;
			margin-bottom: 28px;
			height: 70px;
			position: relative;

			.connect-status-pass-eye {
				position: absolute;
				right: 30rpx; // 调整右侧距离
				top: 90rpx;
				z-index: 999; // 确保在最上层
				padding: 15rpx; // 增加点击区域
			}
		}
	}

	.connect-bottom {
		padding: 0 40rpx;

		.connect-bottom-btn {
			line-height: 120rpx;
			background: #3251c0;
			text-align: center;
			color: #fff;
			border-radius: 50px;
		}
	}

	::v-deep .u-form-item__body__right {
		background: #fff;
	}

	::v-deep .u-form-item__body__right {
		border-radius: 15px;
	}

	::v-deep .u-form-item__body__right__message {
		margin-top: 13px;
	}
</style>